@charset "UTF-8";
//-----------------------------------------------------
// animate scss
//-----------------------------------------------------


.switching {
    -webkit-transform: perspective(2000px) rotateY(-90deg);
    -webkit-animation: flip .4s linear, flip_out .4s .41s linear;
    transform: perspective(2000px) rotateY(-90deg);
    animation: flip .4s linear, flip_out .4s .41s linear;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.mod-loading-rond {
  height: 0.8rem;
  width: 0.8rem;
  border: 1px solid #2db901;
  border-radius : 50%;
  position :absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.4rem;
  margin-top: -0.4rem;
  animation : rond 2s infinite;
  .mod-loading-rond-inner {
      height: 0.1rem;
      width: 0.1rem;
      position: absolute;
      background-color: #2db901;
      border-radius: 50%;
      top: 0;
      left: 0.15rem;
  }
}
.mod-circular-wrap {
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
}
.circular {
    animation: button-spin 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .path {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
        animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        stroke-linecap: round;
    }
}

// 自定义动画
//-----------------------------------------------------

@keyframes dash {
    0% {
        stroke-dasharray:1, 200;
        stroke-dashoffset:0
    }
    50% {
        stroke-dasharray:89, 200;
        stroke-dashoffset:-35
    }
    to {
        stroke-dasharray:89, 200;
        stroke-dashoffset:-124
    }
}
@keyframes color {
    0%, to {
        stroke: #d62d20
    }
    40% {
        stroke: #0057e7
    }
    66% {
        stroke: #008744
    }
    80%, 90% {
        stroke: #ffa700
    }
}

// 旋转loading动画
@keyframes rond {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
}

// loading按钮旋转
@-webkit-keyframes button-spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes button-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

// 沿Y轴3D反转360度
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(2000px) rotateY(0deg)
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(90deg)
  }
}
@keyframes flip {
  0% {
    transform: perspective(2000px) rotateY(0deg)
  }
  100% {
    transform: perspective(2000px) rotateY(90deg)
  }
}
@-webkit-keyframes flip_out {
  0% {
    -webkit-transform: perspective(2000px) rotateY(-90deg)
  }
  100% {
    -webkit-transform: perspective(2000px) rotateY(0deg)
  }
}
@keyframes flip_out {
  0% {
    transform: perspective(2000px) rotateY(-90deg)
  }
  100% {
    transform: perspective(2000px) rotateY(0deg)
  }
}
.sk-wave {
  height: 0.6rem;
  text-align: center;}
  .sk-rect {
    background-color: #2db901;
    height: 100%;
    width: 0.05rem;
    margin-right: 0.02rem;
    display: inline-block;
    -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
            animation: sk-waveStretchDelay 1.2s infinite ease-in-out; }
  .sk-rect1 {
    -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s; }
  .sk-rect2 {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s; }
  .sk-rect3 {
    -webkit-animation-delay: -1s;
            animation-delay: -1s; }
  .sk-rect4 {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; }
  .sk-rect5 {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; }

@-webkit-keyframes sk-waveStretchDelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); } }

@keyframes sk-waveStretchDelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); } }
